<template>
    <view class="page">
        <view class="header">
            <view class="search" @tap="selectLocation"><template v-if="selectedAddress.length == 0"><LocalImage class="icon" src="search.png" /><text class="tips">搜索想要的地点</text></template>{{ selectedAddress }}</view>
            <view class="m-l-20 mode" @tap="toggleMode">{{ displayMode == 'list' ? '地图模式' : '列表模式' }}</view>
        </view>

        <view class="body">
            <view class="wrap">
                <template v-if="displayMode == 'list'">
                    <view v-if="stationList.length > 0" class="p-l-r">
                        <view v-for="(item, index) in stationList" :key="item.id" class="list">
                            <navigator class="main" :url="'/subPages/station/index?id=' + item.id">
                                <view class="name">{{ item.name }}</view>
                                <view class="labels" v-if="item.labels && item.labels.length > 0">{{ item.labels.join(' | ') }}</view>
                                <view v-if="item.pricing" class="price m-t-10">￥{{Number((Number(item.pricing.price) + Number(item.pricing.service)).toFixed(2))}}/度</view>
                                <view class="devices m-t-10">
                                    <view class="device" v-if="item.fast.total > 0">快充 <text class="free">闲{{ item.fast.free }}</text>/{{ item.fast.total }}</view>
                                    <view class="device" v-if="item.slow.total > 0">慢充 <text class="free">闲{{ item.slow.free }}</text>/{{ item.slow.total }}</view>
                                </view>
                            </navigator>
                            <view class="nav" @tap="nav(index)">
                                <LocalImage class="icon" src="nav.png" />
                                <text v-if="item.distance < 0.1">{{ '<' }} 100m</text>
                                <text v-else>{{ item.distance }}km</text>
                            </view>
                        </view>
                    </view>
                    <template v-else>
                        <view v-if="!loading" style="text-align: center;padding-top: 50px;">附近无充电站</view>
                    </template>
                </template>
                <template v-else>
                    <map style="height: 100vh;width: 100vw;" :show-location="true" :longitude="mylongitude" :latitude="mylatitude" :include-points="includePoints" :markers="markers" @regionchange="regionchange" @markertap="markTap" @callouttap="markTap">
                        <cover-view slot="callout">
                            <template v-for="(item, index) in stationList" :key="item.id">
                                <cover-view class="mapDevices" :marker-id="index">
                                    <cover-view class="device" v-if="item.fast.total > 0">快充 <text class="free">闲{{ item.fast.free }}</text>/{{ item.fast.total }}</cover-view>
                                    <cover-view class="device" v-if="item.slow.total > 0">慢充 <text class="free">闲{{ item.slow.free }}</text>/{{ item.slow.total }}</cover-view>
                                </cover-view>
                            </template>
                        </cover-view>
                    </map>
                </template>
            </view>
        </view>
    </view>


    <view v-if="displayMode == 'map' && selectedMarkerIndex > -1" class="mapDevice">
        <navigator class="main" :url="'/subPages/station/index?id=' + stationList[selectedMarkerIndex].id">
            <view class="name">{{ stationList[selectedMarkerIndex].name }}</view>
            <view class="labels" v-if="stationList[selectedMarkerIndex].labels && stationList[selectedMarkerIndex].labels.length > 0">{{ stationList[selectedMarkerIndex].labels.join(' | ') }}</view>
            <view v-if="stationList[selectedMarkerIndex].pricing" class="price m-t-10">￥{{Number((Number(stationList[selectedMarkerIndex].pricing.price) + Number(stationList[selectedMarkerIndex].pricing.service)).toFixed(2))}}/度</view>
            <view class="devices m-t-10">
                <view class="device" v-if="stationList[selectedMarkerIndex].fast.total > 0">快充 <text class="free">闲{{ stationList[selectedMarkerIndex].fast.free }}</text>/{{ stationList[selectedMarkerIndex].fast.total }}</view>
                <view class="device" v-if="stationList[selectedMarkerIndex].slow.total > 0">慢充 <text class="free">闲{{ stationList[selectedMarkerIndex].slow.free }}</text>/{{ stationList[selectedMarkerIndex].slow.total }}</view>
            </view>
        </navigator>
        <view class="nav" @tap="nav(selectedMarkerIndex)">
            <LocalImage class="icon" src="nav.png" />
            <text v-if="stationList[selectedMarkerIndex].distance < 0.1">{{ '<' }} 100m</text>
            <text v-else>{{ stationList[selectedMarkerIndex].distance }}km</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { chooseLocation, getLocation, openLocation, showLoading, hideLoading } from '@/utils/framework'
    import { nearApi } from '@/api/ChargingStation'
    import { ref } from 'vue';
    import LocalImage from '@/components/LocalImage/index.vue'
    import { distanceFromLatLonInKm } from '@/utils';
    import markIcon from '@/assets/images/mark.png'
    
    const displayMode = ref<'list' | 'map'>('list')
    function toggleMode() {
        displayMode.value = displayMode.value == 'list' ? 'map' : 'list'
    }

    const loading = ref(false)
    const stationList = ref<any[]>([])
    const selectedMarkerIndex = ref(-1)
    const markers = ref<any[]>([])
    const includePoints = ref<any[]>([])

    const mylongitude = ref(116.404269)
    const mylatitude = ref(39.915378)

    const longitude = ref(116.404269)
    const latitude = ref(39.915378)
    const selectedAddress = ref('')

    function queryNear(){
        loading.value = true
        stationList.value.splice(0)
        markers.value.splice(0)
        includePoints.value.splice(0)
        showLoading()
        nearApi(longitude.value, latitude.value, 5).then(r => {
            hideLoading()
            if(r.data) {
                
                r.data.forEach((item, i) => {
                    includePoints.value.push({
                        latitude: item.latitude,
                        longitude: item.longitude,
                    })
                    markers.value.push({
                        id : i,
                        iconPath: markIcon,
                        latitude: item.latitude,
                        longitude: item.longitude,
                        width : 36,
                        height : 41,
                        customCallout : {
                            anchorY: 0,
                            anchorX: 0,
                            display: 'ALWAYS'
                        },
                    })
                    item.distance = Number(distanceFromLatLonInKm(mylongitude.value, mylatitude.value, item.longitude, item.latitude).toFixed(1))
                })
            }
            stationList.value = r.data
            
            loading.value = false
        })
    }

    function selectLocation() {
        chooseLocation({
            success(res) {
                selectedAddress.value = res.address
                longitude.value = res.longitude
                latitude.value = res.latitude
                
                queryNear()
            }
        })
    }

    function nav(index:number){
        openLocation({
            longitude : stationList.value[index].longitude,
            latitude : stationList.value[index].latitude,
            name : stationList.value[index].name,
            address : stationList.value[index].address
        })
    }

    function markTap(e){
        const index = e.detail.markerId
        selectedMarkerIndex.value = index
    }

    let changeMapInter:any = null;
    function regionchange(e) {console.log(e)
        if(e.type == 'end') { //结束的
            if(changeMapInter != null) {
                clearTimeout(changeMapInter)
            }

            changeMapInter = setTimeout(() => {
                let location = e.detail.centerLocation
                longitude.value = location.longitude
                latitude.value = location.latitude
                queryNear()
            }, 1000)
            
        }
    }

    getLocation({
        type: 'gcj02',
        success (res) {
            mylongitude.value = res.longitude
            mylatitude.value = res.latitude


            longitude.value = res.longitude
            latitude.value = res.latitude

            queryNear()
        }
    })



</script>

<style lang="scss" src="./index.scss"></style>